<template>
  <div>

    <nut-tabs background="#fff" type="smile" v-model="currentMenu">
      <nut-tab-pane custom-class="custom-tabpane" title="商品">
        <div v-if="isShow">
          <div p-24rpx bg-white v-if="currentData.list" :key="index" v-for="(item, index) in currentData.list">
            <goods :image="item.image" :price="item.price" :res="item" :key="index">
              <template #footer>
                <div text-24rpx color-warmGray flex flex-a-c justify-end @click="del('GOODS', item)">
                  取消关注
                </div>
              </template>
            </goods>
          </div>
          <div mt-100rpx v-else>
            <empty />
          </div>
        </div>
      </nut-tab-pane>
      <nut-tab-pane custom-class="custom-tabpane" title="店铺">
        <div v-if="isShow">
          <div p-36rpx bg-white v-if="currentData.list" :key="index" v-for="(item, index) in currentData.list">
            <store w-full :res="item" :key="index" />
            <div text-24rpx color-warmGray flex flex-a-c justify-end @click="del('STORE', item)">
              取消关注
            </div>
          </div>
          <div mt-100rpx v-else>
            <empty />
          </div>
        </div>
      </nut-tab-pane>

    </nut-tabs>
  </div>
</template>

<script setup lang="ts">
import { cancelStoreCollect } from '@/api/member'
import { getMemberCollection } from '@/api/member';
import store from '@/components/basic-template/store.vue';
import empty from '@/components/empty/index.vue';
import goods from '@/components/goods-list/column.vue';
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
const currentMenu = ref<number>(0)
const isShow = ref(false)
const type = ref(currentMenu.value == 0 ? 'GOODS' : 'STORE')
const currentData = computed(() => data.value[`DSM_${type.value}`])
const data = ref<any>({
  DSM_GOODS: {
    pageNumber: 1,
    pageSize: 20,
    data: "",
    list: ""
  },
  DSM_STORE: {
    pageNumber: 1,
    pageSize: 20,
    data: "",
    list: ""
  }
})
watch(() => currentMenu.value, (val, oldVal) => {
  type.value = currentMenu.value == 0 ? 'GOODS' : 'STORE'
  init()
})


async function del(type: string, val: any) {
  const res = await cancelStoreCollect(type, type === 'GOODS' ? val.skuId : val.id)
  if (res.data.success) {
    uni.showToast({
      title: '取消成功',
      icon: 'none'
    })
    init()
  }
}



async function init() {
  isShow.value = false
  currentData.value.list = []
  currentData.value.pageNumber = 1
  await fetch()

}

// 获取优惠券
async function fetch() {
  uni.stopPullDownRefresh();
  const { pageNumber, pageSize } = currentData.value
  const res = await getMemberCollection({ pageNumber, pageSize }, type.value)
  isShow.value = true
  if (res.data.success) {
    currentData.value.data = res.data.result
    res.data.result.records.forEach((item: any) => {
      item.thumbnail = item.image
    })
    currentData.value.list.push(...res.data.result.records)
  }
}

onPullDownRefresh(() => {
  init()
})
onReachBottom(() => {
  if (currentData.value.data?.total > currentData.value.pageNumber * currentData.value.pageSize) {
    currentData.value.pageNumber++;
    fetch()
  }
})

onMounted(() => {
  init();
})
</script>
<style scoped></style>
<style scoped lang="scss"></style>
